import React,{Suspense} from 'react'
import {Route,Routes,Navigate,BrowserRouter} from 'react-router-dom'
import routes from './RouterConfig'
interface Myprops{

}
interface RouterList{
    path:string;
    component?:any;
    children?:RouterList[];
    to?:string
}
function Index(props:Myprops) {
    const render=(routes:Array<RouterList>)=>{
        return routes.map((item:RouterList,index:number)=>{
            return <Route key={index} path={item.path} element={item.to?<Navigate to={item.to}/>:<item.component/>}>
                {
                    item.children&&render(item.children)
                }
            </Route>
        })
    }
    return (
       
            <Suspense fallback={<div>loading...</div>}>
                 <BrowserRouter>
                <Routes>
                    {
                        render(routes)
                    }
                </Routes>
                </BrowserRouter>
            </Suspense>
       
    )
}

export default Index
